<template>
	<div class="admin_home">
		<div class="div1">
			<img src="@/assets/img/login/logo1.png"/>
			<button><router-link to="/pc/home">返回网站首页</router-link></button>
		</div>
		<div class="login">
			<div class="left">
				<img src="@/assets/img/login/flower.jpg"/>
			</div>
			<div class="right">
				<h1>登录</h1>
				<el-form ref="user" :model="user">
					<el-form-item>
						<el-input placeholder="请输入账号" v-model="user.username"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="请输入密码" v-model="user.password"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="login()">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
	name:'AdminLogin',
	data(){
		return{
			user:{
				username:'',
				password:''
			}
		}
	},
	computed:{
		
	},
	methods:{
		...mapActions(['set']),
		login(){
			this.$postkv('/api/login',this.user).then((resp)=>{
				let token = resp.data.data.token;
				window.localStorage.setItem("token",token);
				this.$get('/api/user/info').then((resp)=>{
					this.user=resp.data.data;
					console.log(this.user);
					
					if(this.user.role=='adm'){
						this.$store.state.role='管理员'
						this.$router.push({path:'/admin/admhome'});
					}
					if(this.user.role=='usr'){
						this.$store.state.role='买家'
						this.$router.push({path:'/pc/home'});
					}
					
					this.set({
						account : this.user.account,
						img : this.user.img,
						name : this.user.name,
						role : this.user.role
					})
					})
					
					this.$message({
						 message:resp.data.msg,
						 type:'success',
					})
					
			})
		},
	}
}
</script>

<style scoped>
.admin_home{
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: linear-gradient(to right,#65cbf7,#B3A5FC);
}
.admin_home .div1{
	width: 80%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.admin_home .div1 img{
	width: 280px;
}
.admin_home .div1 button{
	border: 1px solid #dcdcdc;
	border-radius: 2px;
}
.admin_home .div1 a{
	color: crimson;
	font-size: 16px;
}
.login{
	width: 60%;
	height: 450px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .8);
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.login .left{
	width: 55%;
	height: 450px;
}
.login .left img{
	width: 100%;
	height: 100%;
}
.login .right{
	width: 45%;
	height: 100%;
	background-color: #fff;
	box-sizing: border-box;
	padding: 20px;
	background-color: #ececec;
}
.login .right h1{
	text-align: center;
	padding-top: 40px;
}
.login .right .el-form{
	padding-top: 20px;
	text-align: center;
}
.login .right .el-form .el-input{
	box-shadow: 0 0 4px rgb(0, 0, 0 , .1);
}
.login .right .el-form .el-button{
	width: 14vw;
	margin-top: 10px;
	color: white;
	background-color: #B3A5FC;
}
</style>
